<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入样式 -->
<style>
    .container {
        width: 100%;
    }
</style>

<div id="member-add-app" class="addBrand-container">
    <div class="container">
        <form class="el-form demo-ruleForm">
            <div class="el-form-item is-required">
                <label for="name" class="el-form-item__label" style="width: 180px;">菜单名称:</label>
                <div class="el-form-item__content" style="margin-left: 180px;">
                    <div class="el-input">
                        <input type="text" id="name" autocomplete="off" placeholder="请输入菜单名称" maxlength="20" class="el-input__inner">
                    </div>
                </div>
            </div>
            <div class="el-form-item is-required">
                <label for="parentId" class="el-form-item__label" style="width: 180px;">上级菜单:</label>
                <div class="el-form-item__content" style="margin-left: 180px;">
                    <div class="el-input">
                        <input type="text" class="form-control load-sys-menu" readonly="readonly" id="parentId" placeholder="上级菜单">
                    </div>
                </div>
            </div>

            <div class="el-form-item is-required">
                <label for="nameId" class="el-form-item__label" style="width: 180px;">类型:</label>
                <div class="el-form-item__content" style="margin-left: 180px;">
                    <label class="radio-inline" style="margin-top: -4px;">
                        <input type="radio" name="typeId" value="1" checked style="margin-top: 13px;"> 菜单 </label>
                    <label class="radio-inline" style="margin-top: -4px;">
                        <input type="radio" name="typeId" value="2" style="margin-top: 13px;"> 按钮 </label>
                </div>
            </div>
            <div class="subBox address">
                <div class="el-form-item">
                    <div class="el-form-item__content" style="margin-left: 180px;">
                        <button type="button" class="el-button el-button--default btn-default">取消</button>
                        <button type="button" class="el-button el-button--primary btn-save">保存</button>
                    </div>
                </div>
            </div>
        </form>
        <div class="layui-layer layui-layer-page layui-layer-molv layer-anim" id="menuLayer" type="page" times="2" showtime="0" contype="object"
             style="z-index:59891016; width: 300px; height: 450px; top: 100px; left: 640px; display:none">
            <div class="layui-layer-title" style="cursor: move;">选择菜单</div>
            <div class="layui-layer-content" style="height: 358px;">
                <div style="padding: 10px;" class="layui-layer-wrap">
                    <ul id="menuTree" class="ztree"></ul>    <!-- 动态加载树 -->
                </div>
            </div>
            <span class="layui-layer-setwin"> <a class="layui-layer-ico layui-layer-close layui-layer-close1 btn-cancel" ></a></span>
            <div class="layui-layer-btn layui-layer-btn-">
                <a class="layui-layer-btn0 btn-confirm">确定</a>
                <a class="layui-layer-btn1 btn-cancel">取消</a>
            </div>
        </div>
    </div>
</div>
<script src="api/member/member.js"></script>
<script type="text/javascript" src="../bower_components/ztree/jquery.ztree.all.min.js"></script>
<script type="text/javascript" src="../bower_components/layer/layer.js"></script>
<script>
    var zTree;
    var setting = {
        data:{
            simpleData:{
                //默认是false,把数据当做array，true会转json
                enable : true,
                idKey : "id",//菜单id
                pIdKey : "parentId",//父菜单is
                rootId : null //根节点
            }
        }
    };
    $(function(){
        $(".load-sys-menu").click(zTreeCategory);//动态绑定
        $(".layui-layer-close,.layui-layer-btn1").click(zTreeCategoryHide)//取消
        $(".btn-confirm").click(choiceParentCategory);//确定
        $(".btn-default").click(backToCategoryList);//取消
        $(".btn-save").click(doSaveOrUpdate);//确定
        if($("#cIframe").data("rowData")) {
            UpdateCategoryData();

        }
    })

    function UpdateCategoryData(){
        var data=$("#cIframe").data("rowData");
        $($("input[name='typeId']")[data.menuType -1]).prop("checked",true);
        $("#name").val(data.name);
        $("#parentId").val(data.parentName);
        $("#parentId").data("parentId",data.parentId);
    }

    //提交数据
    function doSaveOrUpdate(){
        var params = {
            name : $("#name").val(),
            parentId : $("#parentId").data("parentId"),
            typeType : $("form input[name='typeId']:checked").val(),
        };
        var url = "category/saveCategory";
        if($("#cIframe").data("rowData")){
            params.id = $("#cIframe").data("rowData").id;
            var url = "category/updateCategory";
        }
        if(!params.name){
            commonShowTips("请填写菜单名!")
            return
        }
        $.get(url,params,function(result){
            commonShowTips(result.message);
        })
    }

    //取消返回页面
    function backToCategoryList(){
        $("#cIframe").load("category/list");
        $("#cIframe").data("rowData","")
    }

    //ztree确定
    function choiceParentCategory(){
        var selects = zTree.getSelectedNodes();//获取被选中的节点集合
        if(!selects.length){
            commonShowTips("未选中父菜单");
            return
        }
        $("#parentId").val(selects[0].name);//把父菜单名填写进去
        $("#parentId").data("parentId",selects[0].id);
        zTreeCategoryHide();//隐藏
    }

    //ztree取消
    function zTreeCategoryHide(){
        $("#menuLayer").hide();
    }

    //ztree拿数据
    function zTreeCategory(){
        var url = "category/findZtreeCategory";
        $.get(url,{},function(result){
            zTree = $.fn.zTree.init($("#menuTree"),setting,result.data);
            zTree.expandAll(true);
            $("#menuLayer").css("display","block");
        })
    }
</script>